<template>
  <el-row>
    <el-col>
      <el-form :inline="true" :model="formInline" size="small">
        <el-form-item label="服务名称">
          <el-input v-model="formInline.value1" style="width: 215px" placeholder="服务名称"></el-input>
        </el-form-item>
        <el-form-item label="服务类型">
          <el-select v-model="formInline.value2" placeholder="服务类型">
            <el-option label="全部" value="0"></el-option>
            <el-option label="地图服务" value="1"></el-option>
            <el-option label="数据服务" value="2"></el-option>
            <el-option label="三维服务" value="3"></el-option>
            <el-option label="影像服务" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务状态">
          <el-select v-model="formInline.value3" placeholder="服务状态">
            <el-option label="全部" value="0"></el-option>
            <el-option label="已发布" value="1"></el-option>
            <el-option label="未发布" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开放限制">
          <el-select v-model="formInline.value4" placeholder="开放限制">
            <el-option label="全部" value="0"></el-option>
            <el-option label="完全开放" value="1"></el-option>
            <el-option label="有条件开放" value="2"></el-option>
            <el-option label="不开放" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下载限制">
          <el-select v-model="formInline.value5" placeholder="下载限制">
            <el-option label="无限制" value="1"></el-option>
            <el-option label="有条件下载" value="2"></el-option>
            <el-option label="不允许下载" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务所属">
          <el-select v-model="formInline.value6" placeholder="服务所属">
            <el-option label="全部" value="1"></el-option>
            <el-option label="我发布的" value="2"></el-option>
            <el-option label="我申请的" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
          <avue-input-tree leaf-only multiple v-model="formInline.value8" placeholder="请选择部门" type="tree" :dic="dic2"></avue-input-tree>
        </el-form-item>
        <el-form-item label="专题分类">
          <avue-input-tree leaf-only multiple v-model="formInline.value7" placeholder="请选择专题" type="tree" :dic="dic"></avue-input-tree>
        </el-form-item>
        <el-form-item>
          <el-button type="success">查询</el-button>
        </el-form-item>
      </el-form>
      <!--       -->
      <vxe-table
              align="center"
              stripe
              :row-config="{isCurrent: true, isHover: true}"
              :data="tableData">
        <vxe-column type="seq" width="60" title="序号"></vxe-column>
        <vxe-column field="value1" title="服务名称"></vxe-column>
        <vxe-column field="value2" title="服务类型"></vxe-column>
        <vxe-column title="服务状态" width="80px">
          <template #default="{ row }">
            <el-switch
                    v-model="row.value3"
                    disabled
                    >
            </el-switch>
          </template>
        </vxe-column>
        <vxe-column field="value4" title="开放限制"></vxe-column>
        <vxe-column field="value5" title="下载限制"></vxe-column>
        <vxe-column field="value7" title="拥有者"></vxe-column>
        <vxe-column field="value9" title="所属部门"></vxe-column>
        <vxe-column field="value10" title="所属专题"></vxe-column>
        <vxe-column field="value11" title="关键词"></vxe-column>
        <vxe-column field="value8" title="描述"></vxe-column>
        <vxe-column field="value6" title="发布时间" width="100px"></vxe-column>
        <vxe-column title="操作" width="155px" fixed="right">
          <template #default="{ row }">
            <el-link type="primary" @click="previewModal=true">预览</el-link> &nbsp;
            <el-link type="primary" @click="toMaps('1')">详情</el-link> &nbsp;
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-link type="primary">更改</el-link><i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{key:'1',id:'123456'}">发布</el-dropdown-item>
                <el-dropdown-item :command="{key:'2',id:'123456'}">停止</el-dropdown-item>
<!--                <el-dropdown-item divided :command="{key:'3',id:'123456'}">更改配置</el-dropdown-item>-->
<!--                <el-dropdown-item divided :command="{key:'5',id:'123456'}">授权管理</el-dropdown-item>-->
<!--                <el-dropdown-item divided :command="{key:'4',id:'123456'}">
                  <span style="color: #ff3636">删除</span>
                </el-dropdown-item>-->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager
              :current-page.sync="page.currentPage"
              :page-size.sync="page.pageSize"
              :total="page.totalResult"
              :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']">
      </vxe-pager>
    </el-col>

    <!--  预览窗口  -->
    <vxe-modal
            v-model="previewModal"
            title="预览"
            width="80%">
      <template #default>
        <service-manage-preview></service-manage-preview>
      </template>
    </vxe-modal>

    <!--  更新配置窗口   -->
    <vxe-modal
            v-model="updateSetingModal"
            title="更改配置"
            width="600">
      <template #default>
        <service-manage-update-seting></service-manage-update-seting>
      </template>
    </vxe-modal>

    <!--  发布配置窗口   -->
    <vxe-modal
            v-model="publishSetingModal"
            title="发布配置"
            width="600">
      <template #default>
        <service-manage-publish-seting></service-manage-publish-seting>
      </template>
    </vxe-modal>
  </el-row>
</template>

<script>
  import ServiceManageUpdateSeting from './ServiceManageUpdateSeting'
  import ServiceManagePublishSeting from './ServiceManagePublishSeting'
  import ServiceManagePreview from './ServiceManagePreview'

  /**
   *{ 服务管理=列表 }
   * @param:
   * @author: 宋康
   * @DateTime: 2022/7/2
   */
  export default {
    name: "ServiceManageList",
    components: {
      ServiceManagePublishSeting,
      ServiceManageUpdateSeting,
      ServiceManagePreview
    },
    data() {
      return {
        updateSetingModal: false,
        publishSetingModal: false,
        previewModal: false,
        formInline: {
          value1: '',
          value2: '',
          value3: '',
          value4: '',
          value5: '',
          value6: '',
          value7: [],
          value8: [],
        },
        dic: [{
          label: '医疗卫生',
          value: 0,
          children: [{
            label: '综合医院',
            value: 2
          }, {
            label: '专科医院',
            value: 3
          }]
        }, {
          label: '旅游景区',
          value: 1
        }],
        dic2: [{
          label: '邯郸',
          value: 0,
          children: [{
            label: '峰峰',
            value: 2,
            children: [{
              label: '水利',
              value: 4,
            }, {
              label: '林业',
              value: 5,
            }, {
              label: '城管',
              value: 7,
            }]
          }, {
            label: '永年',
            value: 3
          }]
        }, {
          label: '邢台',
          value: 1
        }],
        tableData: [
          {value1: '全国人口分布图', value2: '地图服务', value3: true, value4: '完全开放', value5: '无限制', value6: '2022-07-01', value7: '某', value8: '描述', value9: '水利', value10: '人口分布', value11: '中国，人口'},
          {value1: '全国人口数据', value2: '数据服务', value3: false, value4: '有条件开放', value5: '不允许下载', value6: '2022-07-01'},
          {value1: '中国地图', value2: '地图服务', value3: true, value4: '完全开放', value5: '不允许下载', value6: '2022-07-01'},
          {value1: '河北省路网', value2: '交通网络分析服务', value3: true, value4: '不开放', value5: '不允许下载', value6: '2022-07-01'}
        ],
        page: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 300
        },
      }
    },
    methods: {
      /***
       *{ 查看详情 }
       * @param:
       * @author: 宋康
       * @DateTime: 2022/7/4
       */
      toMaps(key) {
        this.$router.push({
          name: 'ServiceManageMaps',
          query: {
            id: key
          }
        })
      },
      /**
       *{ 更改下拉菜单触发 }
       * @param:
       * @author: 宋康
       * @DateTime: 2022/7/5
       */
      handleCommand({key, id}) {
        switch (key) {
          case '1':
            this.publishSetingModal = true
            break;
          case '2':
            this.$confirm('此操作将停止该服务, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '停止成功!'
              });
            }).catch(() => {

            });
            break;
          case '3':
            this.updateSetingModal = true
            break;
          case '4':
            this.$confirm('此操作将永久删除该服务, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
            });
            break;
          case '5':
            this.$router.push({
              name: 'ServiceManageAuthorization',
              query: {
                id: id
              }
            })
            break;
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
</style>
